import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Layout } from 'antd';
import { NavLink } from 'react-router-dom';
import axios from 'axios';
import * as ACTION_TYPE from '../../store/constant';
import logo from '../../static/images/dog.png';
import './style.less';

const { Header } = Layout;

class HeaderCpt extends Component {
	static get propTypes() {
		return {
			changeArticleList: PropTypes.func,
			type: PropTypes.string
		};
	}
	render() {
		const { changeArticleList } = this.props;
		const { type } = this.props;
		return (
			<Header className="headerCpt">
				<NavLink to="/index" replace>
					<img src={logo} alt="DoDo" className="logo" />
					<h1 className="title">Justdodo</h1>
				</NavLink>
				<div className="menu">
					<NavLink
						to="/index"
						replace
						className={type === 'coding' ? 'ac' : ''}
						onClick={() => changeArticleList('coding')}
					>
            Coding
					</NavLink>
					<NavLink
						to="/index"
						replace
						className={type === 'life' ? 'ac' : ''}
						onClick={() => changeArticleList('life')}
					>
            Life
					</NavLink>
					<NavLink
						to="/index"
						replace
						className={type === 'cooking' ? 'ac' : ''}
						onClick={() => changeArticleList('cooking')}
					>
            Cooking
					</NavLink>
				</div>
			</Header>
		);
	}
}

const mapState = state => state;

const mapDispatch = dispatch => ({
	changeArticleList: params => {
		axios.get('https://api.justdodo.cn/acticles?type=' + params).then(res => {
			if (res && res.data.code === 1) {
				dispatch({
					type: ACTION_TYPE.ARTICLE_LIST_CHANGE_TYPE,
					value: {
						type: params,
						data: res.data.data
					}
				});
			}
		});
	}
});

export default connect(
	mapState,
	mapDispatch
)(HeaderCpt);
